<div id="change_password">
  <su-form action="/front/users/change_password"
           method="post"
           :before-submit="onSubmit"
           :init-fields="{authenticity_token: '<%= form_authenticity_token %>'}">
    <input name="utf8" type="hidden" value="✓">
    <input type="hidden" name="_method" value="post">

    <%= form_validate current_user %>

    <su-input label="旧密码" type="password" required name="user[current_password]"></su-input>
    <su-input label="新密码" type="password" required name="user[password]" :validators="{minlength: 8}" :value.sync="user.password"></su-input>
    <su-input label="重复新密码" type="password" required name="user[r_password]" :value.sync="user.rpassword">
      <code slot="help" v-if="user.message">{{user.message}}</code>
    </su-input>
    <form-hoz-row>
      <su-button color="info" type="submit">
        <su-icon icon="check"></su-icon>
        提交
      </su-button>
    </form-hoz-row>
  </su-form>
</div>
<script type="text/javascript" data-turbolinks-eval="true">
  new Vue({
    el: "#change_password",
    data: {
      user: {}
    },
    methods: {
      onSubmit: function (e) {
        if (this.user.password != this.user.rpassword) {
          Vue.set(this.user, "message", "两次密码不同");
          return false
        }
        else {
          Vue.set(this.user, "message", null);
          return true
        }
      }
    },
    ready: function () {
      this.$watch(function () {
        return this.user.password + this.user.rpassword
      }, function () {
        this.onSubmit()
      })
    }
  })

</script>